import React, { useCallback, useEffect, useState } from 'react';

import DoctorForm from '@/components/doctor/form';
import DoctorTable from '@/components/doctor/table';
import '@/assets/styles/global.scss';
import { Button, Space } from 'antd';
import { Link, Outlet, useLocation } from 'react-router-dom';

import { request } from '@/store/modules/doctor';
import { useDispatch, useSelector } from 'react-redux';
import type { StoreState, StoreDispatch } from '@/store';

const Doctor: React.FC = () => {
    const { pathname } = useLocation();

    // 获取仓库状态
    const dispatch: StoreDispatch = useDispatch();
    const dataSource = useSelector(
        (state: StoreState) => state.doctor.dataSource
    );
    // 获取分页
    const doctornum = useSelector(
        (state: StoreState) => state.doctor.doctornum
    );

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    };

    const getTabData = useCallback(async () => {
        await dispatch(request());
    }, [dispatch]);

    useEffect(() => {
        getTabData();
    }, [getTabData]);

    return (
        <>
            {pathname === '/Hospitalmsg/Doctor' && (
                <div>
                    <div className="header">
                        <div className="div1">
                            <div className="icon"></div>
                            <span>医生管理</span>
                        </div>

                        <div className="div2">
                            <Space wrap>
                                <Button>导入</Button>
                                <Button>导出</Button>
                                <Button>删除</Button>
                                <Link to="/Hospitalmsg/Doctor/DoctorAdd">
                                    <Button type="primary">新增医生信息</Button>
                                </Link>
                            </Space>
                        </div>
                    </div>

                    <DoctorForm
                        selectedRowKeys={selectedRowKeys}
                        getTabData={getTabData}
                    />
                    <DoctorTable
                        dataSource={dataSource}
                        doctornum={doctornum}
                        getTabData={getTabData}
                        selectedRowKeys={selectedRowKeys}
                        onSelectChange={onSelectChange}
                    />
                </div>
            )}

            {pathname === '/Hospitalmsg/Doctor/DoctorAdd' && <Outlet />}
            {pathname === '/Hospitalmsg/Doctor/DoctorEdit' && <Outlet />}
        </>
    );
};

export default Doctor;
